<script setup lang="ts">
import { useMessage } from "naive-ui";
import { setMessageComponent } from "@/api/error-handler.ts";
import { onMounted } from "vue";

const message = useMessage();

onMounted(() => {
    // 检查是否为移动端, 并给出相应提示
    if (!/Mobi/i.test(navigator.userAgent)) {
        message.warning("页面为移动端设计, 建议使用移动端访问");
    }
    // 设备深色模式检查
    if (!window.matchMedia("(prefers-color-scheme: dark)").matches) {
        message.info("建议打开设备深色模式体验");
    }
});

setMessageComponent(message);

</script>

<template>
    <div id="ow-inside" class="h-full">
        <router-view v-slot="{ Component }">
            <transition name="ow-router" mode="out-in">
                <component :is="Component"/>
            </transition>
        </router-view>
    </div>
</template>

<style scoped>
.ow-router-enter-active,
.ow-router-leave-active {
    transition: opacity 0.2s ease;
}

.ow-router-enter-from,
.ow-router-leave-to {
    opacity: 0;
}
</style>